<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--解决不同服务器图片跨域访问问题-->
    <meta name="referrer" content="no-referrer"/>
    <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部电影</title>
    <link rel="stylesheet" href="css/Allnovels.css">
    <link rel="stylesheet" href="./css/搜索框.css">
</head>
<body>
<!--头部-->
<header>
    <h1>星龙小说网</h1>
</header>
<!--导航栏-->
<nav class="navbar">
    <ul>
        <li><a href="/index.html">首页</a></li>
        <li><a href="/Allnovels.html">全部小说</a></li>
        <li><a href="/about.html">关于我们</a></li>
        <li><a href="/user.html">个人信息</a></li>
        <li><a href="BookCar.html">我的书架</a></li>
    </ul>
    <span class="userinfo">用户名：<span id="name"></span>&nbsp;<a href="http://localhost:8080/loginOut">注销</a></span>
    <span class="gotologin">请先<a href="login.html">登录</a></span>
</nav>
<div id="title">
    <h1 style="width: 400px">小说分类</h1>
    <hr>
    <table>
        <tr>
            <th>小说类型：</th>
            <td>
                <a href="javascript:;" onclick="getType('')">不限&nbsp;</a>
                <a href="javascript:;" onclick="getType('都市')">都市</a>
                <a href="javascript:;" onclick="getType('玄幻')">玄幻&nbsp;</a>
                <a href="javascript:;" onclick="getType('历史')">历史</a>
                <a href="javascript:;" onclick="getType('修真')">修真</a>
            </td>
        </tr>
        <tr>
            <th>小说状态类型：</th>
            <td>
                <a href="javascript:;" onclick="getbStatus('')">不限&nbsp;</a>
                <a href="javascript:;" onclick="getbStatus('全本')">全本&nbsp;</a>
                <a href="javascript:;" onclick="getbStatus('连载')">连载</a>
            </td>
        </tr>
    </table>
    <label>
        <input type="text" placeholder="搜索想看的小说" id="search_text">
    </label>
    <button id="search" onclick="serchBook()">搜索</button>
</div>
<!--内容-->
<div class="dataList">
    <div class="row">
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
        <div class="column">
            <li><p class="titles">暂无数据</p>
               <img class="Mimg" src="">
            </li>
        </div>
    </div>
    <div>
        <a href="#" id="goTop">>>返回顶部<<</a>
    </div>
</div>

<div class="pagination">
    <button onclick="changePage(-1)">上一页</button>
    <span id="currentPage">1</span>/<span id="totalPages">10</span>
    <button onclick="changePage(1)">下一页</button>
</div>
<div class="pageContainer">
    <p >本站所有小说为转载作品，转载至本站只是为了宣传更多优质小说供观众佬爷们欣赏。</p>
    <p>Copyright 2024 <a href="https://www.shu18.cc/top/">第一版主小说网</a> All Rights Reserved.</p>
</div>
</body>
<script>
    var totalPages; // 总页数
    data={
        "page": 1,
        "size": 20,
        "bType":"",
        "bStatus":"",
        "search":""
    }

    // js入口函数
    $(document).ready(function () {
        getuser();
        // 初始化页面数据和分页信息
        showinfo();
    });

    // 判断是否登录
    function getuser() {
        $.get("http://localhost:8080/getUser", null, function (data) {
            console.log(data);
            if (data === "") {
                $(".gotologin").show();  // 显示
                $(".userinfo").hide();   // 隐藏
            } else {
                $(".gotologin").hide();
                $(".userinfo").show()
                $("#name").text(data.nikename);
            }
        });
    }

    // 分页跳转
    function changePage(direction) {
        data.page += direction;
        if (data.page < 1) {
            data.page = 1;
        } else if (data.page > totalPages) {
            data.page = totalPages;
        }
        $("#currentPage").text(data.page)
        showinfo(); // 重新渲染数据列表和分页信息
    }

    // 渲染数据
    function showinfo() {
        $.post("http://localhost:8080/getAllBook", data, function (data) {
            console.log(data)
            $('#totalPages').text(data.totalPage);
            totalPages = data.totalPage;

            // $(".Mimg").attr("bid","")
            // $(".titles").text("");
            // $(".Mimg").attr("src","");

            for (var i = 0; i < data.books.length; i++) {
                console.log("Title:", data.books[i].bname); // 打印电影标题
                console.log("ID:", data.books[i].bid); // 打印电影ID
                console.log("Image URL:", data.books[i].bimg); // 打印图片URL
                // console.log("Detail URL:", data.movies[i].detailUrl); // 打印详细信息URL

                // 确保data[i].detailUrl存在,否则填充默认值
                var detailUrl = data.books[i].detailUrl == null ? "http://localhost:8080/Loading.html" : data.movies[i].detailUrl;
                $(".Mimg").eq(i).attr("bid",data.books[i].bid)
                $(".titles").eq(i).text(data.books[i].bname);
                $(".Mimg").eq(i).attr("src", data.books[i].bimg);
                $(".column a").eq(i).attr("href", detailUrl);
            }
        });
    }

    // 获取分类小说
    function getType(type) {
        data.page = 1;
        $("#currentPage").text(data.page)
        data.bType = type; // 更新movie_type为传入的type参数
        showinfo()
    }

    // 获取分类小说
    function getbStatus(bStatus) {
        data.page = 1;
        $("#currentPage").text(data.page)
        data.bStatus = bStatus; // 更新bStatus为传入的bStatus参数
        showinfo()
    }

    //搜索小说
    function serchBook(){
        data.page = 1;
        $("#currentPage").text(data.page)
        let text = $("#search_text").val()
        data.search = text;
        showinfo()
        // 查询完后 ，将搜索框的值清空。不再次点击分类时搜索框的值还会携带上
        data.search = '';
    }

    $(".Mimg").click(function (){
        var bid = $(this).attr("bid")
        // alert(bid);
        sessionStorage.setItem("bid",bid);
        location.href="/novelinfo.html"
    })


</script>
</html>